$(function () {
    renderHtmlTagExample();
    renderReactClassExample();
    renderCommentDiv();
});//end jQquery ready.


function renderCommentDiv() {

    var data = [
        {id: 1, author: 'Pete Hunt', text: 'The span of children..'},
        {id: 2, author: 'Steve', text: 'The latest.'}
    ];

    var static_data = [
        {id: 1, author: "Pete Hunt", text: "This is one comment"},
        {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
    ];

    var Comment = React.createClass({
        render: function () {
            return (
                <div className="comment">
                    <h2 className="commentAuthor">
                        {this.props.author}
                    </h2>
                    {this.props.children}
                </div>
            );
        }
    });

    var CommentList = React.createClass({
        render: function () {

            var commentNodes = this.props.data.map(function (comment) {
                return (
                    <Comment key={comment.id} author={comment.author}>
                        THE TEXT HERE:
                        <span>{comment.text}</span>
                    </Comment>
                );
            });
            return (
                <div className="commentList">
                    {commentNodes}
                </div>
            );
        }
    });

    var CommentForm = React.createClass({
        render: function () {
            return (
                <div>the CommentForm div here.</div>
            );
        }
    });

    var CommentBox = React.createClass({
        loadCommentsFromServer: function () {
            var num = this.state.num + 1;
            this.setState({data: static_data, title: 'The comment Title.' + num, num: num});
        },
        getInitialState(){
            return {data: [], title: 'The Predefined Title.', num: 5};
        },
        componentDidMount(){
            //this.loadCommentsFromServer();
            setInterval(this.loadCommentsFromServer, this.props.pollInterval);
        },
        render: function () {
            return (
                <div>
                    <h1>{this.state.title}</h1>
                    <CommentList data={this.state.data}/>
                    <CommentForm />
                </div>
            );
        }
    });
    ReactDOM.render(<CommentBox token={'renderReactClassExample'} pollInterval={2000}/>, $('#myCommentDiv').get(0));
}

function renderReactClassExample() {
    var MyComponent = React.createClass({
        render: function () {
            return <div>the example of:{this.props.token}</div>
        }
    });
    ReactDOM.render(<MyComponent token={'renderReactClassExample'}/>, $('#example1').get(0));
}

function renderHtmlTagExample2() {
    var HelloWorld = React.createClass({
        render: function () {
            return (
                <p>
                    Hello, <input type="text" placeholder=""/> !
                    It is {this.props.date.toTimeString()}
                </p>
            );
        }
    });
    setInterval(function () {
        ReactDOM.render(
            <HelloWorld date={new Date()}/>, $('#example2').get(0)
        );
    }, 500);
}


function renderHtmlTagExample() {
    var myElement = <div>This common html tag example.</div>;
    ReactDOM.render(myElement, $('#example0').get(0));
}